<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1.html</title>
</head>

<body>
  <!-- <b>12345</b> -->
  <h1>我是1.html</h1>
  <p></p>
  <iframe src="http://127.0.0.1:62032/iframe-01/4.html" width="500" height="300" id='frame'></iframe>
  <!-- 设置一个按钮,点击按钮往跨域的4.html发送数据 -->
  <br>
  <button class="postMessage">postMessage in 1.html ---> 22222</button>
  <!-- 用于接受4.html跨域提交过来的数据 -->
  <p class="result"></p>
</body>

</html>

<script>
  // 设置相同的一级域名
  // document.domain = 'gqs.com'
  document.getElementsByTagName('p')[0].innerText = window.location + '端口号不一样'

  // 第一步,要拿到iframe
  let iframe = document.getElementById('frame')
  let iframeWindow = null
  iframe.addEventListener('load', function () {
    iframeWindow = iframe.contentWindow
  },false)

  let postMessageButton = document.querySelector('.postMessage')
  postMessageButton.addEventListener('click', function () {
    // 这里是使用iframeWindow.也就是iframe自己的window发送数据.
    // 而不是使用window.
    // 就相当于使用 postMessage 其实本质上还是自己在给自己发数据.
    iframeWindow.postMessage('1.html发送过来的数据','http://127.0.0.1:62032')
  }, false)

  const result = document.querySelector('.result')
  window.addEventListener('message', function (event) {
    result.innerText = event.data
    console.log(event.source) // 提交数据过来的那个window对象
    console.log(event.source === iframeWindow)
    console.log(event.origin) // 提交数据过来的那个源
  }, false)

  // 1.htmt 内部加载另外一个域名的1.html的数据
  //   const iframe = document.createElement('iframe')
  //   iframe.src = 'http://127.0.0.1:50874/iframe-01/4.html'
  //   document.body.appendChild(iframe)
  //   iframe.onload = function () {
  //     // 跨域只能拿到window
  //     const window = iframe.contentWindow
  //     // console.log(window.global4Obj.name) 
  //     /*
  //     Blocked a frame with origin "http://127.0.0.1:12345" from accessing a cross-origin frame.
  //     at HTMLIFrameElement.iframe.onload (http://127.0.0.1:12345/1.html:28:24)
  // iframe.onload @ 1.html:28
  // load (async)
  // (anonymous) @ 1.html:26
  //     */
  //     // 跨域拿不到document 
  //     // const iframeDoc = iframe.contentDocument
  //     // iframeDoc.body.style.backgroundColor = 'red'
  //     // const document = iframe.contentDocument
  //     // console.log(window,document)
  //   }
  // window.onload = function () {
  //   let frame = document.getElementById('frame')
  //   // 相当于还是自己在给自己传啊!!!
  //   document.getElementById('text').addEventListener('input', function () {
  //     frame.contentWindow.postMessage(this.value, 'http://127.0.0.1:56434/')
  //   }, false)
  // }

  // let content = document.querySelector('.content')
  // window.addEventListener('message', function (e) {
  //   content.innerText = e.data
  // }, false)

  // let iframe = document.getElementById('frame')
  // iframe.onload = function () {
  //   const window = iframe.contentWindow
  //   const document = iframe.contentDocument
  //   console.log('window',window)
  //   console.log('document',document)
  //   console.log('window.document',window.document)
  //   // console.log(window.obj.name)
  // }

  // window.postMessage('1.html的数据','http://127.0.0.1:50874/')
</script>